<template>
  <div>
    <div class="acea-row row-middle border_bottom pb-24" v-if="psInfo">
      <div class="avatar mr20"><img :src="psInfo.faceUrl"></div>
      <div class="dashboard-workplace-header-tip">
      <p class="dashboard-workplace-header-tip-title" v-text="psInfo.userName || '-'"></p>
      <div class="dashboard-workplace-header-tip-desc">
      <span class="dashboard-workplace-header-tip-desc-sp pb-1">总计投诉: {{ allCount }}</span>
<!--      <span class="dashboard-workplace-header-tip-desc-sp">本月随手拍: {{ monthCount }}</span>-->
      </div>
      </div>
    </div>
    <el-row align="middle" :gutter="10" class="ivu-mt mt20">
      <el-col :span="4">
        <el-menu
          default-active="0"
          class="el-menu-vertical-demo"
          @select="changeType"
        >
          <el-menu-item :name="item.val" v-for="(item, index) in list" :key="index" :index="item.val">
            <span slot="title">{{item.label}}</span>
          </el-menu-item >
        </el-menu>
      </el-col>
      <el-col :span="20">
        <el-table :data="tableData" class="tabNumWidth"  v-loading="loading" max-height="400" style="width: 100%">
<!--          <el-table-column-->
<!--            :prop="item.key"-->
<!--            :label="item.title"-->
<!--            width="item.minWidth"-->
<!--            :show-overflow-tooltip="true"-->
<!--            v-for="(item, index) in columns" :key="index"-->
<!--          />-->
          <el-table-column prop="operateTypeText" label="投诉领域" width="160">
            <template slot-scope="scope">
              <div v-if="scope.row.type===1">工程建设领域</div>
              <div v-if="scope.row.type===2">非工程建设领域</div>
            </template>
          </el-table-column>
          <el-table-column prop="salaryTime" label="欠薪日期" width="160"></el-table-column>
          <el-table-column prop="createTime" label="投诉日期" width="160"></el-table-column>
          <el-table-column prop="status" label="处理状态" width="130">
            <template slot-scope="scope">
              <div  v-if="scope.row.status===1">待受理</div>
              <div v-if="scope.row.status===2">已办结</div>
              <div  v-if="scope.row.status===3">已驳回</div>
              <div  v-if="scope.row.status===4">处理中</div>
            </template>
          </el-table-column>
            <el-table-column prop="remark,rejectRemark,handleRemark" label="备注" width="240">
              <template slot-scope="scope">
                <div v-if="scope.row.status===1">暂无</div>
                <div v-if="scope.row.status===2">{{scope.row.remark}}</div>
                <div  v-if="scope.row.status===3">{{scope.row.rejectRemark}}</div>
                <div  v-if="scope.row.status===4">{{scope.row.handleRemark}}</div>
              </template>
            </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            :page-sizes="[6, 12, 18, 24]"
            :page-size="tableFrom.limit"
            :current-page="tableFrom.page"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tableData.total"
            @size-change="handleSizeChange"
            @current-change="pageChange"
          />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {getBehindUser, getBehindUserById, infobyconditionApi, topdetailApi} from '@/api/user'
  export default {
    name: "UserDetails",
    props:{
      id: {
        type: Number,
        default: null
      },
      editData: {
        type: Object,
        default: () => {
          return { rules: [] }
        }
      },
    },
    data() {
      return {
        loading: false,
        columns: [],
        Visible: false,
        score:'',
        allCount:'',
        monthCount:'',
        list: [
          { val: '0', label: '投诉详情' },
          // { val: '1', label: '登录记录' },
        ],
        tableData: {
        },
        tableFrom: {
          page: 1,
          limit: 6,
          type : '0',
          userId : '',
          id:null
        },
        psInfo: null
      }
    },
    mounted(){
      if(this.id){
        this.getHeader()
        this.changeType(this.tableFrom.type)
        this.tableFrom.id=this.id
      }
      this.getInfo();
      this.initEditData();
    },
    methods: {
      changeType(key) {
        this.tableFrom.type = key
        if(key === '0'){
          //this.integral()
        }else{
          this.getInfo()
        }
      },
      initEditData() {
        this.tableData = this.editData
        console.log(this.tableData)
      },
      integral() {
        this.loading = true
        this.tableFrom.id=this.id
        getBehindUser( this.tableFrom).then(res => {
        //后期接口调用
        // let res = {"page":1,"limit":6,"totalPage":2,"total":6,"list":[
        //     {
        //       "id": 6,
        //       "title": "核销",
        //       "integral": "-11.00",
        //       "balance": "0.00",
        //       "updateTime": "2023-03-21 15:54:17",
        //       "mark": "",
        //     },
        //     {
        //       "id": 5,
        //       "title": "立案受理",
        //       "integral": "+4.00",
        //       "balance": "11.00",
        //       "updateTime": "2023-03-21 15:53:17",
        //       "mark": "",
        //     },
        //     {
        //       "id": 4,
        //       "title": "提交随手拍",
        //       "integral": "+1.00",
        //       "balance": "7.00",
        //       "updateTime": "2023-03-21 15:51:56",
        //       "mark": "",
        //     },
        //     {
        //       "id": 3,
        //       "title": "提交随手拍",
        //       "integral": "+1.00",
        //       "balance": "6.00",
        //       "updateTime": "2023-03-21 15:32:01",
        //       "mark": "",
        //     },
        //     {
        //       "id": 2,
        //       "title": "立案受理",
        //       "integral": "+4.00",
        //       "balance": "5.00",
        //       "updateTime": "2023-03-21 13:41:44",
        //       "mark": "",
        //     },
        //     {
        //       "id": 1,
        //       "title": "提交随手拍",
        //       "integral": "+1.00",
        //       "balance": "1.00",
        //       "updateTime": "2023-03-21 13:40:17",
        //       "mark": "",
        //     }
        //   ]};
          this.allCount = res.count
          this.tableData.data = res.list
          this.tableData.total = res.count

          this.columns = [
            {
              title: '来源/用途',
              key: 'operateTypeText',
              minWidth: 120
            },
            {
              title: '积分变化',
              key: 'score',
              minWidth: 120
            },
            {
              title: '变化后积分',
              key: 'afterScore',
              minWidth: 120
            },
            {
              title: '日期',
              key: 'updateTimecrtTime',
              minWidth: 120
            },
            {
              title: '备注',
              key: 'data',
              minWidth: 120
            }
          ]
          console.log(555555555)
          console.log(this.tableData.data.key)
          this.loading = false
        }).catch(res => {
          this.loading = false
        })
      },
      getInfo() {
        this.tableFrom.id = this.id
        this.loading = true
        getBehindUserById(this.tableFrom).then(res => {
        //后期接口调用
        // let res = {"page":1,"limit":6,"totalPage":0,"total":0,"list":[
        //     {
        //       "id": 2,
        //       "lastLoginTime": "2023-03-21 13:41:44",
        //       "lastLoginIp": "42.94.250.190",
        //       "mark": "",
        //     },
        //     {
        //       "id": 1,
        //       "lastLoginTime": "2023-03-20 23:22:03",
        //       "lastLoginIp": "42.94.250.190",
        //       "mark": "",
        //     },
        //   ]};

          this.psInfo = res
          //this.tableData.total = res.total
          // switch (this.tableFrom.type) {
          //   case '1':
          //     this.columns = [
          //       {
          //         title: '近次登录时间',
          //         key: 'lastLoginTime',
          //         minWidth: 120
          //       },
          //       {
          //         title: '近次登录IP',
          //         key: 'lastLoginIp',
          //         minWidth: 120
          //       },
          //       {
          //         title: '备注',
          //         key: 'mark',
          //         minWidth: 120
          //       },
          //     ]
          //     break;
          // }
          this.loading = false
        }).catch(() => {
          this.loading = false
        })
      },
      pageChange(page) {
        this.tableFrom.page = page
        if(this.tableFrom.type === '0'){
          this.integral()
        }else{
          this.getInfo()
        }
      },
      handleSizeChange(val) {
        this.tableFrom.limit = val
        if(this.tableFrom.type === '0'){
          this.integral()
        }else{
          this.getInfo()
        }
      },
      getHeader() {
        //topdetailApi({id : this.id}).then(res => {
        //后期接口调用
        let res = {"user":{"uid":7933,"account":"15812980822","realName":"","birthday":"","cardId":"","mark":"","partnerId":null,"groupId":"","tagId":"","nickname":"b1f372d99453","avatar":"https://api.java.crmeb.net/crmebimage/store/2020/08/15/adae23e354114cd5bd8f3cae740741c23opxeh8kw2.jpg","phone":"15812980822","sex":0,"country":"CN","addIp":"","lastIp":"","nowMoney":"0.00","brokeragePrice":"0.00","integral":0,"experience":0,"signNum":0,"status":true,"level":0,"spreadUid":0,"spreadTime":null,"userType":"h5","isPromoter":false,"payCount":0,"spreadCount":0,"addres":"","adminid":0,"loginType":"","updateTime":"2022-10-25 00:15:13","createTime":"2022-10-25 00:15:13","lastLoginTime":"2022-10-25 00:15:13","cleanTime":null,"path":"/0/","subscribe":false,"promoterTime":null},"balance":"0.00","integralCount":0,"allCount":3,"monthCount":3,"allConsumeCount":"0","mothConsumeCount":"0"};

          this.psInfo = res
        //})
      }
    },

  }
</script>

<style scoped lang="scss">
  .avatar{
    width: 70px;
    height: 70px;
    border-radius: 50%;
    overflow: hidden;
    margin-left: 18px;
    img{
      width: 100%;
      height: 100%;
    }
  }
  .dashboard-workplace {
    &-header {
      &-avatar {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        margin-right: 16px;
        font-weight: 600;
      }

      &-tip {
        width: 82%;
        display: inline-block;
        vertical-align: middle;
        margin-top: -12px;
        &-title {
          font-size: 13px;
          font-weight: 600;
          color: rgba(0, 0, 0, 0.85);
          line-height: 18px;
          padding: 10px 0 10px;
        }

        &-desc {
          &-sp {
            width: 32%;
            color: #17233D;
            font-size: 13px;
            display: inline-block;
          }
        }
      }

      &-extra {
        .ivu-col {
          p {
            text-align: right;
          }

          p:first-child {
            span:first-child {
              margin-right: 4px;
            }

            span:last-child {
              color: #808695;
            }
          }

          p:last-child {
            font-size: 22px;
          }
        }
      }
    }
  }
  .pb-1{
    padding-bottom: 10px;
  }
  .mr20{
    margin: 0 20px;
  }
  .border_bottom{
    border-bottom: 1px solid #E7EAEC;
  }
  .pb-24{
    padding-bottom: 24px;
  }
</style>
